import React, { useState, useRef } from 'react';
import cn from 'classnames';
import { throttle } from 'lodash';
import styles from './style.less';

const DraggableWrapper = ({ children, isShake, isExtended, className, setIsDragging, ...props }) => {
    const [translateData, setTranslateData] = useState({
        translateX: -13,
        translateY: 25
    });
    const [isMouseDown, setIsMouseDown] = useState(false);
    const staticData = useRef({
        moveAble: false,
        originX: 0,
        originY: 0,
        lastX: 0,
        lastY: 0,
        diffX: 0,
        diffY: 0
    });

    const getTarget = event => event.target || event.srcElement;
    // const touchMove = throttle(
    const touchMove = throttle(
        e => {
            // console.log(e);
            e.preventDefault();
            if (!staticData.current.moveAble) {
                return;
            }
            let curTransferX = staticData.current.lastX + e.clientX - staticData.current.originX;
            let curTransferY = staticData.current.lastY + e.clientY - staticData.current.originY;
            // 左偏移最大值
            if (curTransferX <= staticData.current.rangeX[0]) {
                [curTransferX] = staticData.current.rangeX;
                console.log('左偏移最大值');
            }
            // 右偏移最大值
            if (curTransferX >= staticData.current.rangeX[1]) {
                [, curTransferX] = staticData.current.rangeX;
                console.log('右偏移最大值');
            }
            // 上偏移最大值
            if (curTransferY <= staticData.current.rangeY[0]) {
                [curTransferY] = staticData.current.rangeY;
            }
            // 下偏移最大值
            if (curTransferY >= staticData.current.rangeY[1]) {
                [, curTransferY] = staticData.current.rangeY;
            }
            console.log({
                translateX: curTransferX,
                translateY: curTransferY
            });
            setTranslateData({
                translateX: curTransferX,
                translateY: curTransferY
            });
        },
        16,
        { leading: true, trailing: true }
    );

    const touchStart = e => {
        setIsMouseDown(true);
        setIsDragging(true);
        e.preventDefault();
        let target = getTarget(e);
        // eslint-disable-next-line no-const-assign
        while (target.offsetParent) {
            console.log(target);
            target = target.offsetParent;
            if (target.dataset?.dragwrapper) break;
        }
        console.log('target', target, target.offsetParent);
        staticData.current.moveAble = true;
        staticData.current.originX = e.clientX;
        staticData.current.originY = e.clientY;
        staticData.current.lastX = translateData.translateX;
        staticData.current.lastY = translateData.translateY;
        /**
         * 边界判断逻辑
         * x轴translate可设置的范围区间为[-目标左偏移量, (可视窗口宽度 - 目标左偏移量 - 目标宽度)]
         * y轴translate可设置的范围区间为[-目标上偏移量, (可视窗口高度 - 目标上偏移量 - 目标高度)]
         */
        staticData.current.rangeX = [
            -target.offsetLeft,
            document.body.clientWidth - target.offsetLeft - target.offsetWidth
        ];
        console.log(-target.offsetLeft, document.body.clientWidth, target.offsetLeft, target.offsetWidth);
        staticData.current.rangeY = [
            -target.offsetTop,
            document.body.clientHeight - target.offsetTop - target.offsetHeight
        ];
        console.log(-target.offsetTop, document.body.clientHeight, target.offsetTop, target.offsetHeight);
        console.log('边界判断逻辑', staticData.current);
        document.addEventListener('mousemove', touchMove);
        document.addEventListener('mouseup', () => {
            // 拖到窗口外释放也可监听到
            e.persist();
            setIsMouseDown(false);
            setIsDragging(false);
            document.removeEventListener('mousemove', touchMove);
            staticData.current.moveAble = false;
        });
    };

    return (
        <div
            data-dragwrapper
            id="popConfirmAnchor1"
            className={cn(styles.float, isExtended ? styles.addHeight : '')}
            style={{
                transform: `translate(${translateData.translateX}px, ${translateData.translateY}px)`
            }}
            {...props}
        >
            <div className={cn(isShake ? styles.shakeX : '', className, styles.contentWrapper)}>
                {children}
                {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
                <div className={styles.draggableIconWrapper} onMouseDown={touchStart}>
                    <i
                        className={cn(
                            'iconfont iconblock_drag_icon',
                            styles.draggableIcon,
                            isMouseDown ? styles.dragging : ''
                        )}
                    />
                </div>
            </div>
        </div>
    );
};

export default DraggableWrapper;
